// 背景特效工具类
export default class BackgroundEffects {
  constructor() {
    this.currentEffect = null
    this.effects = {
      // 增强版彩虹渐变背景
      rainbow: {
        create: (container) => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect rainbow'
          bg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(-45deg, #ff00ff, #00ffff, #ff00ff, #ff69b4, #8a2be2);
            background-size: 400% 400%;
            animation: rainbowShift 15s ease infinite;
            filter: blur(10px);
            opacity: 0.9;
          `

          // 添加粒子元素
          for (let i = 0; i < 20; i++) {
            const particle = document.createElement('div')
            const size = Math.random() * 50 + 20
            const x = Math.random() * 100
            const y = Math.random() * 100
            const opacity = Math.random() * 0.3 + 0.1
            const delay = Math.random() * 5

            particle.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: rgba(255, 255, 255, 0.8);
              border-radius: 50%;
              left: ${x}%;
              top: ${y}%;
              opacity: ${opacity};
              filter: blur(15px);
              animation: float ${Math.random() * 10 + 10}s ease-in-out ${delay}s infinite;
              mix-blend-mode: screen;
            `

            bg.appendChild(particle)
          }

          // 添加动画关键帧
          this.addKeyframes('rainbowShift', `
            0% { background-position: 0% 50%; }
            25% { background-position: 100% 50%; }
            50% { background-position: 100% 100%; }
            75% { background-position: 0% 100%; }
            100% { background-position: 0% 50%; }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 增强版星空粒子背景
      stars: {
        create: (container) => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect stars'
          bg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0a0e27 0%, #050714 100%);
            overflow: hidden;
          `

          // 创建星星粒子 - 普通星星
          const starsCount = 200
          for (let i = 0; i < starsCount; i++) {
            const star = document.createElement('div')
            const size = Math.random() * 3 + 1
            const opacity = Math.random() * 0.8 + 0.2
            const x = Math.random() * 100
            const y = Math.random() * 100
            const delay = Math.random() * 5
            const speed = Math.random() * 3 + 2

            // 随机颜色（白色、蓝色、黄色）
            const colors = ['white', '#87CEEB', '#FFFFE0']
            const color = colors[Math.floor(Math.random() * colors.length)]

            star.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: ${color};
              border-radius: 50%;
              left: ${x}%;
              top: ${y}%;
              opacity: ${opacity};
              animation: twinkle ${speed}s ease-in-out ${delay}s infinite;
              box-shadow: 0 0 ${size * 3}px ${size}px ${color}40;
              transform-origin: center;
            `

            bg.appendChild(star)
          }

          // 创建流星效果
          for (let i = 0; i < 10; i++) {
            this.createShootingStar(bg, i * 5)
          }

          // 添加银河效果
          const galaxy = document.createElement('div')
          galaxy.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 150%;
            height: 150%;
            background: repeating-linear-gradient(
              45deg,
              rgba(128, 0, 255, 0.03) 0px,
              rgba(128, 0, 255, 0) 20px
            );
            transform: rotate(-30deg) translate(-25%, -25%);
            animation: galaxyMove 100s linear infinite;
          `
          bg.appendChild(galaxy)

          // 添加闪烁动画
          this.addKeyframes('twinkle', `
            0%, 100% { opacity: 0.3; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
          `)

          this.addKeyframes('shootingStar', `
            0% { transform: translateX(0) translateY(0); opacity: 0; width: 0; }
            1% { opacity: 1; width: 100px; }
            99% { transform: translateX(-500px) translateY(500px); opacity: 1; width: 100px; }
            100% { transform: translateX(-600px) translateY(600px); opacity: 0; width: 0; }
          `)

          this.addKeyframes('galaxyMove', `
            0% { transform: rotate(-30deg) translate(-25%, -25%); }
            100% { transform: rotate(-30deg) translate(-75%, -75%); }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 增强版波浪效果背景
      waves: {
        create: (container) => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect waves'
          bg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(180deg, #0077b6 0%, #023e8a 100%);
            overflow: hidden;
          `

          // 创建波浪
          const waveColors = [
            'rgba(0, 224, 255, 0.6)',
            'rgba(0, 191, 255, 0.4)',
            'rgba(0, 136, 255, 0.3)',
            'rgba(255, 255, 255, 0.2)',
          ]

          for (let i = 0; i < waveColors.length; i++) {
            const wave = document.createElement('div')
            const height = 120 - i * 20
            const delay = i * 1.5
            const duration = 20 + i * 5

            wave.style.cssText = `
              position: absolute;
              bottom: ${i * 80}px;
              left: -50%;
              width: 200%;
              height: ${height}px;
              background: ${waveColors[i]};
              border-radius: 50% 50% 0 0;
              animation: wave ${duration}s ease-in-out ${delay}s infinite;
              mix-blend-mode: overlay;
            `
            bg.appendChild(wave)
          }

          // 添加气泡效果
          for (let i = 0; i < 20; i++) {
            this.createBubble(bg, i * 0.5)
          }

          // 添加波浪动画
          this.addKeyframes('wave', `
            0% { transform: translateY(0) translateX(0); }
            25% { transform: translateY(-15px) translateX(10px); }
            50% { transform: translateY(0) translateX(20px); }
            75% { transform: translateY(-15px) translateX(10px); }
            100% { transform: translateY(0) translateX(0); }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 增强版渐变网格背景
      grid: {
        create: (container) => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect grid'
          bg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            overflow: hidden;
          `

          // 创建动态网格
          const grid = document.createElement('div')
          grid.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 200%;
            height: 200%;
            background-image: 
              linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: gridMove 30s linear infinite;
            transform: translate(-50%, -50%);
          `
          bg.appendChild(grid)

          // 添加发光节点
          for (let i = 0; i < 15; i++) {
            const node = document.createElement('div')
            const size = Math.random() * 300 + 100
            const opacity = Math.random() * 0.3 + 0.1
            const x = Math.random() * 100
            const y = Math.random() * 100

            node.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
              border-radius: 50%;
              left: ${x}%;
              top: ${y}%;
              transform: translate(-50%, -50%);
              opacity: ${opacity};
              mix-blend-mode: screen;
              animation: pulse ${Math.random() * 10 + 10}s ease-in-out infinite;
            `
            bg.appendChild(node)
          }

          this.addKeyframes('gridMove', `
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
          `)

          this.addKeyframes('pulse', `
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; }
            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 增强版霓虹辉光效果
      neon: {
        create: (container) => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect neon'
          bg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, #0a0a0a 0%, #1a1a2e 100%);
            overflow: hidden;
          `

          // 创建网格底纹
          const grid = document.createElement('div')
          grid.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
              linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            opacity: 0.7;
          `
          bg.appendChild(grid)

          // 创建霓虹线条
          const colors = ['#ff00ff', '#00ffff', '#ff00ff', '#8a2be2', '#00ff00']
          for (let i = 0; i < 20; i++) {
            const line = document.createElement('div')
            const length = Math.random() * 400 + 100
            const width = Math.random() * 5 + 1
            const angle = Math.random() * 360
            const opacity = Math.random() * 0.7 + 0.3
            const x = Math.random() * 100
            const y = Math.random() * 100
            const color = colors[Math.floor(Math.random() * colors.length)]
            const delay = Math.random() * 5
            const speed = Math.random() * 5 + 5

            line.style.cssText = `
              position: absolute;
              width: ${length}px;
              height: ${width}px;
              background: ${color};
              left: ${x}%;
              top: ${y}%;
              transform: translate(-50%, -50%) rotate(${angle}deg);
              opacity: ${opacity};
              filter: blur(${width * 2}px) drop-shadow(0 0 15px ${color});
              animation: neonPulse ${speed}s ease-in-out ${delay}s infinite;
              mix-blend-mode: screen;
            `

            // 为每个线条单独设置动画，避免角度问题
            const animName = `neonPulse${i}`
            this.addKeyframes(animName, `
              0%, 100% { opacity: ${opacity * 0.6}; transform: translate(-50%, -50%) rotate(${angle}deg) scale(0.9); }
              50% { opacity: ${opacity}; transform: translate(-50%, -50%) rotate(${angle}deg) scale(1.1); }
            `)
            line.style.animationName = animName

            bg.appendChild(line)
          }

          // 添加发光圆点
          for (let i = 0; i < 15; i++) {
            const dot = document.createElement('div')
            const size = Math.random() * 10 + 5
            const opacity = Math.random() * 0.8 + 0.2
            const x = Math.random() * 100
            const y = Math.random() * 100
            const delay = Math.random() * 3
            const colors = ['#ff00ff', '#00ffff', '#00ff00']
            const color = colors[Math.floor(Math.random() * colors.length)]

            dot.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: ${color};
              border-radius: 50%;
              left: ${x}%;
              top: ${y}%;
              opacity: ${opacity};
              filter: blur(5px) drop-shadow(0 0 10px ${color});
              animation: neonDot ${Math.random() * 3 + 2}s ease-in-out ${delay}s infinite;
              mix-blend-mode: screen;
            `

            bg.appendChild(dot)
          }

          this.addKeyframes('neonDot', `
            0%, 100% { opacity: 0.2; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 增强版流动液体效果
      liquid: {
        create: (container) => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect liquid'
          bg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #0061ff, #60efff);
            overflow: hidden;
          `

          // 创建液体形态 - 多层波浪
          for (let i = 0; i < 5; i++) {
            const liquid = document.createElement('div')
            const size = Math.random() * 250 + 250
            const x = Math.random() * 100
            const y = Math.random() * 100
            const opacity = 0.4 - i * 0.07
            const delay = i * 1.5
            const speed = Math.random() * 10 + 15
            const hueOffset = i * 20

            liquid.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: radial-gradient(circle, hsla(${hueOffset}, 100%, 80%, 0.5) 0%, hsla(${hueOffset}, 100%, 60%, 0) 70%);
              border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
              left: ${x}%;
              top: ${y}%;
              transform: translate(-50%, -50%);
              opacity: ${opacity};
              mix-blend-mode: overlay;
              animation: liquidMove ${speed}s ease-in-out ${delay}s infinite;
              filter: blur(20px);
            `

            bg.appendChild(liquid)
          }

          // 添加光点效果
          for (let i = 0; i < 15; i++) {
            const light = document.createElement('div')
            const size = Math.random() * 50 + 20
            const opacity = Math.random() * 0.3 + 0.1
            const x = Math.random() * 100
            const y = Math.random() * 100

            light.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: white;
              border-radius: 50%;
              left: ${x}%;
              top: ${y}%;
              transform: translate(-50%, -50%);
              opacity: ${opacity};
              filter: blur(10px);
              mix-blend-mode: screen;
              animation: lightFloat ${Math.random() * 10 + 10}s ease-in-out infinite;
            `

            bg.appendChild(light)
          }

          this.addKeyframes('liquidMove', `
            0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(-50%, -50%) rotate(0deg); }
            25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translate(-50%, -50%) rotate(90deg); }
            50% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; transform: translate(-50%, -50%) rotate(180deg); }
            75% { border-radius: 70% 30% 40% 60% / 30% 70% 40% 60%; transform: translate(-50%, -50%) rotate(270deg); }
            100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(-50%, -50%) rotate(360deg); }
          `)

          this.addKeyframes('lightFloat', `
            0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.1; }
            50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.3; }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 新增：极光效果
      aurora: {
        create: (container) => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect aurora'
          bg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #000011, #000033);
            overflow: hidden;
          `

          // 创建极光条纹
          const auroraColors = [
            ['#00ffff', '#0088ff'],
            ['#ff00ff', '#8800ff'],
            ['#00ff88', '#00ff00'],
            ['#ff88ff', '#ff0088'],
          ]

          for (let i = 0; i < auroraColors.length; i++) {
            const [color1, color2] = auroraColors[i]
            const aurora = document.createElement('div')
            const height = Math.random() * 100 + 150
            const y = Math.random() * 50 + 10
            const delay = i * 3

            aurora.style.cssText = `
              position: absolute;
              left: -50%;
              top: ${y}%;
              width: 200%;
              height: ${height}px;
              background: linear-gradient(to right, transparent, ${color1}, ${color2}, transparent);
              opacity: 0.3;
              filter: blur(40px);
              transform: skewX(-30deg);
              animation: auroraMove ${Math.random() * 20 + 30}s ease-in-out ${delay}s infinite;
              mix-blend-mode: screen;
            `

            bg.appendChild(aurora)
          }

          // 添加星星背景
          for (let i = 0; i < 100; i++) {
            const star = document.createElement('div')
            const size = Math.random() * 2 + 1
            const opacity = Math.random() * 0.8 + 0.2
            const x = Math.random() * 100
            const y = Math.random() * 100

            star.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: white;
              border-radius: 50%;
              left: ${x}%;
              top: ${y}%;
              opacity: ${opacity};
              animation: twinkle ${Math.random() * 3 + 2}s ease-in-out infinite;
            `

            bg.appendChild(star)
          }

          this.addKeyframes('auroraMove', `
            0% { transform: skewX(-30deg) translateX(-20%); }
            50% { transform: skewX(-30deg) translateX(20%); }
            100% { transform: skewX(-30deg) translateX(-20%); }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 新增：玻璃态效果
      glassmorphism: {
        create: (container) => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect glassmorphism'
          bg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            overflow: hidden;
          `

          // 创建动态模糊球
          for (let i = 0; i < 6; i++) {
            const blurBall = document.createElement('div')
            const size = Math.random() * 300 + 200
            const opacity = Math.random() * 0.4 + 0.2
            const x = Math.random() * 100
            const y = Math.random() * 100
            const hue = Math.random() * 360
            const delay = i * 2

            blurBall.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: hsl(${hue}, 80%, 60%);
              border-radius: 50%;
              left: ${x}%;
              top: ${y}%;
              opacity: ${opacity};
              filter: blur(80px);
              transform: translate(-50%, -50%);
              animation: glassFloat ${Math.random() * 20 + 30}s ease-in-out ${delay}s infinite;
            `

            bg.appendChild(blurBall)
          }

          // 添加网格纹理
          const grid = document.createElement('div')
          grid.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
              linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
              linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 30px 30px;
            opacity: 0.5;
          `
          bg.appendChild(grid)

          this.addKeyframes('glassFloat', `
            0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(0deg); }
            25% { transform: translate(-50%, -50%) scale(1.1) rotate(5deg); }
            50% { transform: translate(-50%, -50%) scale(1) rotate(10deg); }
            75% { transform: translate(-50%, -50%) scale(1.1) rotate(5deg); }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 新增：粒子爆炸效果
      explosion: {
        create: (container) => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect explosion'
          bg.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, #1a1a2e 0%, #16213e 100%);
            overflow: hidden;
          `

          // 创建爆炸粒子
          const createExplosion = (x, y, color) => {
            for (let i = 0; i < 50; i++) {
              const particle = document.createElement('div')
              const size = Math.random() * 4 + 2
              const angle = Math.random() * Math.PI * 2
              const distance = Math.random() * 150 + 50
              const speed = Math.random() * 2 + 1

              particle.style.cssText = `
                position: absolute;
                width: ${size}px;
                height: ${size}px;
                background: ${color};
                border-radius: 50%;
                left: ${x}%;
                top: ${y}%;
                transform: translate(-50%, -50%);
                opacity: 1;
                box-shadow: 0 0 10px ${color};
              `

              bg.appendChild(particle)

              // 使用动画帧实现爆炸效果
              setTimeout(() => {
                let step = 0
                const maxSteps = 100
                const animate = () => {
                  if (step >= maxSteps) {
                    particle.remove()
                    return
                  }

                  const progress = step / maxSteps
                  const currentDistance = distance * Math.min(progress, 1 - (progress - 0.5) * 2)
                  const currentX = x + Math.cos(angle) * currentDistance
                  const currentY = y + Math.sin(angle) * currentDistance

                  particle.style.left = `${currentX}%`
                  particle.style.top = `${currentY}%`
                  particle.style.opacity = `${1 - progress}`

                  step++
                  requestAnimationFrame(animate)
                }
                animate()
              }, Math.random() * 2000)
            }
          }

          // 定期触发爆炸
          const explode = () => {
            const x = Math.random() * 100
            const y = Math.random() * 100
            const colors = ['#ff00ff', '#00ffff', '#ff0000', '#00ff00', '#ff8800']
            const color = colors[Math.floor(Math.random() * colors.length)]
            createExplosion(x, y, color)
            setTimeout(explode, Math.random() * 3000 + 2000)
          }

          // 启动爆炸效果
          explode()

          return bg
        },
        destroy: () => { },
      },

      // 粉色梦幻背景
      dreamy: {
        create: () => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect dreamy'
          bg.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -9999;
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
            pointer-events: none;
          `

          // 添加装饰圆形
          for (let i = 0; i < 5; i++) {
            const circle = document.createElement('div')
            const size = Math.random() * 300 + 100
            const opacity = Math.random() * 0.3 + 0.1
            const x = Math.random() * 100
            const y = Math.random() * 100

            circle.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: white;
              border-radius: 50%;
              left: ${x}%;
              top: ${y}%;
              opacity: ${opacity};
              transform: translate(-50%, -50%);
              animation: float ${Math.random() * 10 + 20}s ease-in-out infinite;
            `

            bg.appendChild(circle)
          }

          // 添加浮动动画
          this.addKeyframes('float', `
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.1); }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 科技感背景
      tech: {
        create: () => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect tech'
          bg.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -9999;
            background: #000;
            pointer-events: none;
            overflow: hidden;
          `

          // 添加网格线
          const grid = document.createElement('div')
          grid.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
              linear-gradient(rgba(0, 255, 0, 0.1) 1px, transparent 1px),
              linear-gradient(90deg, rgba(0, 255, 0, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
          `
          bg.appendChild(grid)

          // 添加扫描线
          const scanline = document.createElement('div')
          scanline.style.cssText = `
            position: absolute;
            top: -100%;
            left: 0;
            width: 100%;
            height: 2px;
            background: rgba(0, 255, 0, 0.5);
            box-shadow: 0 0 10px 2px rgba(0, 255, 0, 0.5);
            animation: scanline 3s linear infinite;
          `
          bg.appendChild(scanline)

          // 添加扫描线动画
          this.addKeyframes('scanline', `
            0% { top: -100%; }
            100% { top: 200%; }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 火焰效果背景
      fire: {
        create: () => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect fire'
          bg.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -9999;
            background: #1a1a1a;
            pointer-events: none;
            overflow: hidden;
          `

          // 添加火焰底部
          const fireBase = document.createElement('div')
          fireBase.style.cssText = `
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 300px;
            background: linear-gradient(to top, #ff4500, transparent);
          `
          bg.appendChild(fireBase)

          // 添加火焰粒子
          for (let i = 0; i < 100; i++) {
            const flame = document.createElement('div')
            const size = Math.random() * 20 + 5
            const opacity = Math.random() * 0.8 + 0.2
            const x = Math.random() * 100
            const delay = Math.random() * 2

            flame.style.cssText = `
              position: absolute;
              bottom: 0;
              left: ${x}%;
              width: ${size}px;
              height: ${Math.random() * 150 + 50}px;
              background: linear-gradient(to top, #ff6b6b, #ffd93d);
              border-radius: 50% 50% 0 0;
              opacity: ${opacity};
              animation: flame ${Math.random() * 1 + 1}s ease-in-out ${delay}s infinite;
            `

            bg.appendChild(flame)
          }

          // 添加火焰动画
          this.addKeyframes('flame', `
            0%, 100% { transform: scale(1) translateX(0); height: 100px; }
            25% { transform: scale(1.1) translateX(-5px); height: 120px; }
            50% { transform: scale(0.9) translateX(5px); height: 110px; }
            75% { transform: scale(1.05) translateX(-3px); height: 125px; }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 樱花飘落背景
      sakura: {
        create: () => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect sakura'
          bg.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -9999;
            background: linear-gradient(to bottom, #ffe6f2, #ffc2e2);
            pointer-events: none;
            overflow: hidden;
          `

          // 添加樱花花瓣
          for (let i = 0; i < 100; i++) {
            const petal = document.createElement('div')
            const size = Math.random() * 15 + 5
            const x = Math.random() * 100
            const delay = Math.random() * 10
            const duration = Math.random() * 20 + 10

            petal.style.cssText = `
              position: absolute;
              top: -50px;
              left: ${x}%;
              width: ${size}px;
              height: ${size}px;
              background: #ffb7c5;
              border-radius: 150% 0 150% 0;
              transform: rotate(45deg);
              animation: falling ${duration}s linear ${delay}s infinite;
              box-shadow: 0 0 10px rgba(255, 183, 197, 0.5);
            `

            bg.appendChild(petal)
          }

          // 添加飘落动画
          this.addKeyframes('falling', `
            0% { top: -50px; transform: translateX(0) rotate(45deg); }
            100% { top: 150vh; transform: translateX(100px) rotate(360deg); }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 水波纹背景
      ripple: {
        create: () => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect ripple'
          bg.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -9999;
            background: #1a237e;
            pointer-events: none;
          `

          // 添加水波纹
          for (let i = 0; i < 5; i++) {
            const ripple = document.createElement('div')
            const size = Math.random() * 500 + 300
            const x = Math.random() * 100
            const y = Math.random() * 100
            const delay = Math.random() * 5

            ripple.style.cssText = `
              position: absolute;
              left: ${x}%;
              top: ${y}%;
              width: ${size}px;
              height: ${size}px;
              border: 2px solid rgba(255, 255, 255, 0.3);
              border-radius: 50%;
              transform: translate(-50%, -50%);
              animation: ripple ${Math.random() * 5 + 5}s linear ${delay}s infinite;
              opacity: 0;
            `

            bg.appendChild(ripple)
          }

          // 添加波纹动画
          this.addKeyframes('ripple', `
            0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
            100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
          `)

          return bg
        },
        destroy: () => { },
      },

      // 复古电视噪点背景
      noise: {
        create: () => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect noise'
          bg.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -9999;
            background: #000;
            pointer-events: none;
            opacity: 0.5;
          `

          // 添加噪点效果
          const noise = document.createElement('div')
          noise.style.cssText = `
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('');
            background-repeat: repeat;
            opacity: 0.6;
          `
          bg.appendChild(noise)

          return bg
        },
        destroy: () => { },
      },

      // 彩色方块背景
      squares: {
        create: () => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect squares'
          bg.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -9999;
            background: #f0f0f0;
            pointer-events: none;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
            gap: 1px;
          `

          const colors = ['#ff6b6b', '#48dbfb', '#10ac84', '#feca57', '#ff9ff3', '#54a0ff']

          // 创建方块
          for (let i = 0; i < 50; i++) {
            const square = document.createElement('div')
            const color = colors[Math.floor(Math.random() * colors.length)]
            square.style.cssText = `
              background: ${color};
              opacity: 0.8;
              transform: scale(0.8);
              transition: all 0.3s ease;
            `

            bg.appendChild(square)
          }

          return bg
        },
        destroy: () => { },
      },

      // 渐变模糊背景
      blur: {
        create: () => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect blur'
          bg.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -9999;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            filter: blur(10px);
            pointer-events: none;
          `

          // 添加模糊圆形
          for (let i = 0; i < 5; i++) {
            const circle = document.createElement('div')
            const size = Math.random() * 400 + 200
            const opacity = Math.random() * 0.4 + 0.2
            const x = Math.random() * 100
            const y = Math.random() * 100
            const hue = Math.random() * 360

            circle.style.cssText = `
              position: absolute;
              width: ${size}px;
              height: ${size}px;
              background: hsl(${hue}, 80%, 60%);
              border-radius: 50%;
              left: ${x}%;
              top: ${y}%;
              opacity: ${opacity};
              filter: blur(100px);
              transform: translate(-50%, -50%);
            `

            bg.appendChild(circle)
          }

          return bg
        },
        destroy: () => { },
      },

      // 简约渐变背景
      simple: {
        create: (color1 = '#4facfe', color2 = '#00f2fe') => {
          const bg = document.createElement('div')
          bg.className = 'bg-effect simple'
          bg.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -9999;
            background: linear-gradient(135deg, ${color1} 0%, ${color2} 100%);
            pointer-events: none;
          `

          return bg
        },
        destroy: () => { },
      },
    }
  }

  // 添加关键帧动画
  addKeyframes(name, css) {
    // 检查动画是否已存在
    const styleId = `keyframes-${name}`
    if (document.getElementById(styleId)) {
      return
    }

    const style = document.createElement('style')
    style.id = styleId
    style.textContent = `@keyframes ${name} {${css}}`
    document.head.appendChild(style)
  }

  // 创建流星效果的辅助方法
  createShootingStar(container, delay) {
    const star = document.createElement('div')
    const x = Math.random() * 100
    const y = Math.random() * 30

    star.style.cssText = `
      position: absolute;
      left: ${x}%;
      top: ${y}%;
      height: 2px;
      background: linear-gradient(90deg, transparent, white, transparent);
      border-radius: 1px;
      opacity: 0;
      transform-origin: left;
      box-shadow: 0 0 10px 1px white;
      animation: shootingStar 5s linear ${delay}s infinite;
    `

    container.appendChild(star)
  }

  // 创建气泡效果的辅助方法
  createBubble(container, delay) {
    const bubble = document.createElement('div')
    const size = Math.random() * 40 + 20
    const x = Math.random() * 100
    const duration = Math.random() * 15 + 15

    bubble.style.cssText = `
      position: absolute;
      left: ${x}%;
      bottom: -50px;
      width: ${size}px;
      height: ${size}px;
      background: rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      opacity: 0;
      animation: bubbleFloat ${duration}s ease-in-out ${delay}s infinite;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
    `

    container.appendChild(bubble)
  }

  // 创建背景效果
  createEffect(effectName, container = document.body, options = {}) {
    console.log('创建背景效果:', effectName)

    // 先移除当前效果
    this.removeCurrentEffect()

    // 确保container是有效的DOM元素
    if (!container || !(container instanceof HTMLElement)) {
      console.error('无效的容器元素，使用document.body')
      container = document.body
    }

    // 保留容器的其他子元素，只创建新的特效元素
    const effectContainer = document.createElement('div')
    effectContainer.className = `bg-effect bg-effect-${effectName}`

    // 设置容器基础样式，使用options自定义配置
    const zIndex = options.zIndex || -9999
    const intensity = options.intensity || 1

    effectContainer.style.cssText = `
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: ${zIndex};
      overflow: hidden;
      pointer-events: none;
      opacity: ${intensity};
    `

    // 应用特效
    if (!this.effects[effectName]) {
      console.warn(`背景效果 ${effectName} 不存在，使用默认效果`)
      effectName = 'rainbow'
    }

    try {
      // 设置背景色
      const bgColor = this.getEffectColor(effectName)
      effectContainer.style.background = bgColor

      // 调用对应特效的create方法添加特效元素
      if (this.effects[effectName].create) {
        const effectElements = this.effects[effectName].create(effectContainer, options)
        // 有些create方法会返回新元素，有些会直接修改container
        if (effectElements && effectElements !== effectContainer) {
          effectContainer.appendChild(effectElements)
        }
      }

      // 添加到指定容器
      container.appendChild(effectContainer)
      this.currentEffect = effectContainer

      console.log('背景效果已成功应用')
      return effectContainer
    } catch (error) {
      console.error('创建背景效果时出错:', error)
      // 应用一个简单的备用背景
      effectContainer.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: ${zIndex};
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        overflow: hidden;
        pointer-events: none;
        opacity: ${intensity};
      `
      container.appendChild(effectContainer)
      return effectContainer
    }
  }

  // 获取效果对应的基础颜色
  getEffectColor(effectName) {
    const colorMap = {
      rainbow: 'linear-gradient(-45deg, #ff00ff, #00ffff, #ff00ff, #ff69b4, #8a2be2)',
      stars: 'linear-gradient(135deg, #0a0e27 0%, #050714 100%)',
      waves: 'linear-gradient(180deg, #0077b6 0%, #023e8a 100%)',
      grid: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      dreamy: 'linear-gradient(135deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)',
      tech: '#000',
      fire: '#1a1a1a',
      sakura: 'linear-gradient(to bottom, #ffe6f2, #ffc2e2)',
      ripple: '#1a237e',
      noise: '#000',
      squares: '#f0f0f0',
      blur: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      simple: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
      neon: 'radial-gradient(circle at center, #0a0a0a 0%, #1a1a2e 100%)',
      liquid: 'linear-gradient(135deg, #0061ff, #60efff)',
      aurora: 'linear-gradient(to bottom, #000011, #000033)',
      glassmorphism: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      explosion: 'radial-gradient(circle, #1a1a2e 0%, #16213e 100%)',
      geometric: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      gradientCircles: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
      bubbles: 'linear-gradient(135deg, #0061ff 0%, #60efff 100%)',
      fluid: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
      grid3d: 'linear-gradient(135deg, #000033 0%, #000066 100%)',
      particles: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
    }
    return colorMap[effectName] || 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
  }

  // 移除当前背景效果
  removeCurrentEffect() {
    if (this.currentEffect && this.currentEffect.parentNode) {
      this.currentEffect.parentNode.removeChild(this.currentEffect)
      this.currentEffect = null
    }
  }

  // 初始化所有效果
  initEffects() {
    // 添加更多多样化的背景效果
    this.addMoreEffects()
  }

  // 添加更多多样化的背景效果
  addMoreEffects() {
    // 几何形状背景
    this.effects.geometric = {
      create: () => {
        const bg = document.createElement('div')

        // 创建几何形状
        for (let i = 0; i < 30; i++) {
          const shape = document.createElement('div')
          const size = Math.random() * 150 + 50
          const x = Math.random() * 100
          const y = Math.random() * 100
          const rotation = Math.random() * 360
          const colors = ['#ff6b6b', '#48dbfb', '#10ac84', '#feca57', '#ff9ff3', '#54a0ff']
          const color = colors[Math.floor(Math.random() * colors.length)]
          const shapeType = Math.floor(Math.random() * 3) // 0: 圆形, 1: 方形, 2: 三角形

          let shapeStyle = ''
          if (shapeType === 0) {
            shapeStyle = 'border-radius: 50%;'
          } else if (shapeType === 2) {
            shapeStyle = 'clip-path: polygon(50% 0%, 0% 100%, 100% 100%);'
          }

          shape.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: ${color};
            left: ${x}%;
            top: ${y}%;
            transform: translate(-50%, -50%) rotate(${rotation}deg);
            opacity: 0.1;
            ${shapeStyle}
            animation: float ${Math.random() * 20 + 10}s ease-in-out infinite;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
          `

          bg.appendChild(shape)
        }

        // 添加发光网格
        const grid = document.createElement('div')
        grid.style.cssText = `
          position: absolute;
          top: 0;
          left: 0;
          width: 200%;
          height: 200%;
          background-image: 
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
          background-size: 40px 40px;
          animation: gridMove 40s linear infinite;
        `
        bg.appendChild(grid)

        return bg
      },
      destroy: () => { },
    }

    // 渐变圆形背景增强版
    this.effects.gradientCircles = {
      create: () => {
        const bg = document.createElement('div')

        for (let i = 0; i < 10; i++) {
          const circle = document.createElement('div')
          const size = Math.random() * 600 + 200
          const x = Math.random() * 100
          const y = Math.random() * 100
          const hue = Math.random() * 360
          const saturation = Math.random() * 40 + 60
          const lightness = Math.random() * 20 + 40

          circle.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: hsl(${hue}, ${saturation}%, ${lightness}%);
            border-radius: 50%;
            left: ${x}%;
            top: ${y}%;
            opacity: ${Math.random() * 0.2 + 0.1};
            filter: blur(80px);
            transform: translate(-50%, -50%);
            animation: slowFloat ${Math.random() * 30 + 20}s ease-in-out infinite;
            box-shadow: 0 0 100px hsl(${hue}, ${saturation}%, ${lightness}%, 0.3);
          `

          bg.appendChild(circle)
        }

        // 添加粒子效果
        for (let i = 0; i < 50; i++) {
          const particle = document.createElement('div')
          const size = Math.random() * 3 + 1
          const x = Math.random() * 100
          const y = Math.random() * 100
          const hue = Math.random() * 360

          particle.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: hsl(${hue}, 100%, 80%);
            border-radius: 50%;
            left: ${x}%;
            top: ${y}%;
            opacity: ${Math.random() * 0.8 + 0.2};
            animation: twinkle ${Math.random() * 3 + 2}s ease-in-out infinite;
            box-shadow: 0 0 ${size * 3}px hsl(${hue}, 100%, 60%);
          `

          bg.appendChild(particle)
        }

        // 添加动画
        this.addKeyframes('slowFloat', `
          0%, 100% { transform: translate(-50%, -50%) scale(1); }
          50% { transform: translate(-50%, -50%) scale(1.2); }
        `)

        return bg
      },
      destroy: () => { },
    }

    // 气泡效果增强版
    this.effects.bubbles = {
      create: () => {
        const bg = document.createElement('div')

        // 添加气泡
        for (let i = 0; i < 80; i++) {
          const bubble = document.createElement('div')
          const size = Math.random() * 60 + 10
          const x = Math.random() * 100
          const y = Math.random() * 150 // 超出屏幕底部，产生从下往上的动画
          const delay = Math.random() * 10
          const duration = Math.random() * 20 + 10
          const hue = Math.random() * 60 + 180 // 蓝色系气泡

          bubble.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 100%);
            border-radius: 50%;
            left: ${x}%;
            top: ${y}%;
            transform: translateX(-50%);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), inset 0 0 20px rgba(255, 255, 255, 0.5);
            animation: riseBubble ${duration}s linear ${delay}s infinite;
          `

          // 添加气泡高光
          const highlight = document.createElement('div')
          highlight.style.cssText = `
            position: absolute;
            width: ${size / 3}px;
            height: ${size / 3}px;
            background: rgba(255, 255, 255, 0.8);
            border-radius: 50%;
            top: 15%;
            left: 15%;
          `
          bubble.appendChild(highlight)

          bg.appendChild(bubble)
        }

        // 添加水面波纹效果
        for (let i = 0; i < 3; i++) {
          const wave = document.createElement('div')
          const size = Math.random() * 300 + 200
          const x = Math.random() * 100
          const y = Math.random() * 50 + 25

          wave.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            left: ${x}%;
            top: ${y}%;
            transform: translate(-50%, -50%) scale(0);
            animation: waterWave ${Math.random() * 5 + 5}s ease-out infinite;
          `

          bg.appendChild(wave)
        }

        // 添加上升动画
        this.addKeyframes('riseBubble', `
          0% { transform: translateX(-50%) translateY(0) scale(0.8); opacity: 0; }
          20% { opacity: 0.8; }
          80% { opacity: 0.8; }
          100% { transform: translateX(-50%) translateY(-150vh) scale(1.2); opacity: 0; }
        `)

        // 添加水波动画
        this.addKeyframes('waterWave', `
          0% { transform: translate(-50%, -50%) scale(0); opacity: 0.5; }
          100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
        `)

        return bg
      },
      destroy: () => { },
    }

    // 新增：流体渐变效果
    this.effects.fluid = {
      create: () => {
        const bg = document.createElement('div')

        // 创建多个流体形状
        for (let i = 0; i < 6; i++) {
          const fluid = document.createElement('div')
          const size = Math.random() * 400 + 300
          const x = Math.random() * 100
          const y = Math.random() * 100
          const hue = Math.random() * 360
          const delay = i * 2

          fluid.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: hsl(${hue}, 80%, 50%);
            border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            left: ${x}%;
            top: ${y}%;
            opacity: 0.3;
            filter: blur(60px);
            transform: translate(-50%, -50%);
            animation: fluidMove ${Math.random() * 15 + 15}s ease-in-out ${delay}s infinite;
            mix-blend-mode: overlay;
          `

          bg.appendChild(fluid)
        }

        // 添加发光粒子
        for (let i = 0; i < 30; i++) {
          const particle = document.createElement('div')
          const size = Math.random() * 5 + 2
          const x = Math.random() * 100
          const y = Math.random() * 100
          const hue = Math.random() * 360

          particle.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: hsl(${hue}, 100%, 80%);
            border-radius: 50%;
            left: ${x}%;
            top: ${y}%;
            opacity: 0.8;
            box-shadow: 0 0 15px hsl(${hue}, 100%, 60%);
            animation: twinkle ${Math.random() * 3 + 2}s ease-in-out infinite;
          `

          bg.appendChild(particle)
        }

        // 添加流体动画
        this.addKeyframes('fluidMove', `
          0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(-50%, -50%) rotate(0deg); }
          25% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translate(-50%, -50%) rotate(90deg); }
          50% { border-radius: 40% 60% 60% 40% / 60% 40% 60% 40%; transform: translate(-50%, -50%) rotate(180deg); }
          75% { border-radius: 70% 30% 40% 60% / 30% 70% 40% 60%; transform: translate(-50%, -50%) rotate(270deg); }
          100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(-50%, -50%) rotate(360deg); }
        `)

        return bg
      },
      destroy: () => { },
    }

    // 新增：3D网格效果
    this.effects.grid3d = {
      create: () => {
        const bg = document.createElement('div')

        // 创建3D网格
        const grid = document.createElement('div')
        grid.style.cssText = `
          position: absolute;
          top: 0;
          left: 0;
          width: 200%;
          height: 200%;
          background-image: 
            linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
          background-size: 30px 30px;
          transform: perspective(500px) rotateX(60deg) translateZ(-100px) translateY(-20%);
          animation: grid3dMove 30s linear infinite;
        `
        bg.appendChild(grid)

        // 添加发光节点
        for (let i = 0; i < 20; i++) {
          const node = document.createElement('div')
          const x = Math.random() * 100
          const y = Math.random() * 100
          const size = Math.random() * 4 + 2
          const hue = Math.random() * 120 + 180 // 蓝色到绿色系

          node.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: hsl(${hue}, 100%, 80%);
            border-radius: 50%;
            left: ${x}%;
            top: ${y}%;
            opacity: 0.8;
            box-shadow: 0 0 10px hsl(${hue}, 100%, 60%);
            animation: pulse ${Math.random() * 3 + 2}s ease-in-out infinite;
          `

          bg.appendChild(node)
        }

        // 添加3D网格动画
        this.addKeyframes('grid3dMove', `
          0% { transform: perspective(500px) rotateX(60deg) translateZ(-100px) translateY(-20%) translateX(0); }
          100% { transform: perspective(500px) rotateX(60deg) translateZ(-100px) translateY(-20%) translateX(-50%); }
        `)

        return bg
      },
      destroy: () => { },
    }

    // 新增：动态粒子背景
    this.effects.particles = {
      create: () => {
        const bg = document.createElement('div')

        // 创建连接的粒子
        const particles = []
        const particleCount = 80

        for (let i = 0; i < particleCount; i++) {
          const particle = document.createElement('div')
          const size = Math.random() * 3 + 2
          const x = Math.random() * 100
          const y = Math.random() * 100
          const hue = Math.random() * 180

          particle.style.cssText = `
            position: absolute;
            width: ${size}px;
            height: ${size}px;
            background: hsl(${hue}, 100%, 80%);
            border-radius: 50%;
            left: ${x}%;
            top: ${y}%;
            opacity: 0.8;
            box-shadow: 0 0 10px hsl(${hue}, 100%, 60%);
          `

          // 存储粒子信息用于动画
          particles.push({
            element: particle,
            x,
            y,
            size,
            speedX: (Math.random() - 0.5) * 0.5,
            speedY: (Math.random() - 0.5) * 0.5,
            hue,
          })

          bg.appendChild(particle)
        }

        // 使用requestAnimationFrame实现粒子动画
        const animateParticles = () => {
          particles.forEach(particle => {
            // 更新位置
            particle.x += particle.speedX
            particle.y += particle.speedY

            // 边界检测
            if (particle.x < 0 || particle.x > 100) {
              particle.speedX *= -1
            }
            if (particle.y < 0 || particle.y > 100) {
              particle.speedY *= -1
            }

            // 应用位置
            particle.element.style.left = `${particle.x}%`
            particle.element.style.top = `${particle.y}%`
          })

          requestAnimationFrame(animateParticles)
        }

        animateParticles()

        return bg
      },
      destroy: () => { },
    }
  }

  // 获取路由对应的背景效果
  getRouteEffect(routeName) {
    // 为不同路由设置不同的背景效果
    const routeEffectMap = {
      // 首页 - 彩虹渐变
      home: 'rainbow',
      // 游戏 - 科技感背景
      game: 'tech',
      // 音乐 - 波浪效果
      music: 'waves',
      musicDetail: 'waves',
      // 科技 - 网格效果
      tech: 'grid',
      // 电影 - 梦幻效果
      movie: 'dreamy',
      // 关于我们 - 星空粒子
      about: 'stars',
      // 联系我们 - 模糊渐变
      contact: 'blur',
      // 图片库 - 简约渐变
      gallery: 'simple',
      // 错误页面 - 噪点背景
      404: 'noise',
      error: 'noise',
      // 博客页面 - 樱花飘落
      blog: 'sakura',
      // 文章详情 - 简约渐变
      article: 'simple',
      // 分类页面 - 网格效果
      category: 'grid',
      // 标签页面 - 科技感
      tag: 'tech',
      // 搜索页面 - 科技感
      search: 'tech',
      // 登录注册 - 梦幻效果
      login: 'dreamy',
      register: 'dreamy',
      // 用户中心 - 模糊渐变
      profile: 'blur',
      // 设置页面 - 简约渐变
      settings: 'simple',
      // 仪表盘 - 科技感
      dashboard: 'tech',
      // 管理页面 - 科技感
      admin: 'tech',
      // 统计页面 - 网格效果
      statistics: 'grid',
      // 分析页面 - 网格效果
      analytics: 'grid',
      // VIP页面 - 星空粒子
      vip: 'stars',
      // 高级会员 - 星空粒子
      premium: 'stars',
      // 升级页面 - 梦幻效果
      upgrade: 'dreamy',
      // 结账页面 - 简约渐变
      checkout: 'simple',
      // 新增页面背景效果
      // 活动页面 - 极光效果
      activity: 'aurora',
      // 商城页面 - 气泡效果
      shop: 'bubbles',
      // 特惠页面 - 霓虹灯光
      discount: 'neon',
      // 产品页面 - 几何形状
      product: 'geometric',
      // 服务页面 - 渐变圆形
      service: 'gradientCircles',
      // 帮助页面 - 简单渐变
      help: 'simple',
      // 下载页面 - 科技感
      download: 'tech',
      // 上传页面 - 科技感
      upload: 'tech',
      // 收藏页面 - 梦幻效果
      favorites: 'dreamy',
      // 历史记录 - 模糊渐变
      history: 'blur',
      // 通知页面 - 霓虹灯光
      notifications: 'neon',
      // 评论页面 - 樱花飘落
      comments: 'sakura',
      // 分享页面 - 波浪效果
      share: 'waves',
      // 排行榜 - 火焰效果
      ranking: 'fire',
      // 专题页面 - 极光效果
      topic: 'aurora',
      // 任务页面 - 几何形状
      tasks: 'geometric',
      // 成就页面 - 渐变圆形
      achievements: 'gradientCircles',
      // 团队页面 - 星空粒子
      team: 'stars',
      // 原有页面效果
      anime: 'sakura',
      food: 'fluid', // 使用流体渐变效果
      sports: 'particles', // 使用动态粒子效果
      message: 'grid3d', // 使用3D网格效果
      videoDetail: 'glassmorphism', // 使用玻璃态效果
      animal: 'gradientCircles', // 使用渐变圆形效果
      comic: 'sakura',
      knowledge: 'tech',
      life: 'fluid',
      tv: 'dreamy',
      virtual: 'glassmorphism',
      entertainment: 'neon',
      discover: 'ripple',
      car: 'particles',
      chinese: 'sakura',
      novel: 'gradientCircles',
    }

    return routeEffectMap[routeName] || 'rainbow'
  }
}

// 创建BackgroundEffects实例
const backgroundEffectsInstance = new BackgroundEffects()

// 导出主要方法
export const createEffect = (effectName, container = document.body, options = {}) => backgroundEffectsInstance.createEffect(effectName, container, options)

export const removeCurrentEffect = () => backgroundEffectsInstance.removeCurrentEffect()

export const getEffectColor = (effectName) => backgroundEffectsInstance.getEffectColor(effectName)

export const getRouteEffect = (routeName) => backgroundEffectsInstance.getRouteEffect(routeName)